<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>🦥 Monster Slayer</title>
		<link
			href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap"
			rel="stylesheet"
		/>
		<link
			rel="stylesheet"
			type="text/css"
			href="https://csshake.surge.sh/csshake.min.css"
		/>
		<link rel="stylesheet" href="styles.css" />
		<script
			src="https://cdn.jsdelivr.net/npm/vue@3.3.13/dist/vue.global.min.js"
			defer
		></script>
		<script src="app.js" defer></script>
	</head>
	<body>
		<header>
			<div class="shake-opacity shake-freeze">
				<h1 id="title">Monster Slayer 🦥</h1>
			</div>
		</header>

		<div id="game">
			<section id="monster" class="container">
				<h2>Monster Health</h2>
				<div class="healthbar">
					<div
						class="healthbar__value"
						:style="monsterBarStyles"
					></div>
				</div>
			</section>

			<section id="player" class="container">
				<h2>Health</h2>
				<div class="healthbar">
					<div
						class="healthbar__value"
						:style="playerBarStyles"
					></div>
				</div>
			</section>
			<!-- <section class="container">
				<input type="text" placeholder="Choose your name" />
			</section> -->

			<section class="container" v-if="winner" id="result-container">
				<h3>Game Over!</h3>
				<h1 v-if="winner === 'player'">You won! 😎</h1>
				<h1 v-else-if="winner === 'monster'">You lost! 🚽</h1>
				<h1 v-else>It's a draw! 🌓</h1>
			</section>
			<section class="controls">
				<button @click="startGame">Restart</button>
			</section>

			<section class="controls" v-if="!winner">
				<button @click="attackMonster">Attack</button>
				<button
					:disabled="mayUseSpecialAttack"
					@click="specialAttackMonster"
				>
					Special Attack
				</button>
				<button @click="healPlayer">Heal</button>
				<button @click="surrender">Surrender</button>
			</section>

			<section id="log" class="container">
				<h2>Battle Log</h2>
				<ul>
					<li v-for="logMessage in logMessages">
						<span
							:class="{'log--player' : logMessage.actionBy === 'player','log--monster' : logMessage.actionBy === 'monster'}"
						>
							{{ logMessage.actionBy === 'player' ? 'player' :
							'monster'}}
						</span>

						<span v-if="logMessage.actionType === 'heals'">
							heals himself for
							<span class="log-value log--heal"
								>{{ logMessage.actionValue }}
							</span>
							points
						</span>

						<span v-else>
							attacks and deals
							<span class="log-value log--damage"
								>{{ logMessage.actionValue }}
							</span>
							damage
						</span>

						<!-- <span>
							special attacks and deals
							<span class="log-value log--super-damage"> </span>
							damage
						</span>

						<span>wins</span>

						<span> looses </span>

						<span> surrenders </span> -->
					</li>
				</ul>
			</section>
		</div>
	</body>
</html>
